<template>
    <div>
        <el-table
        :summary-method="getSummaries"
          show-summary
          ref="multipleTable"
          :data="cartList"
          tooltip-effect="dark"
          style="width: 100%">

        <el-table-column label="是否选择" width="55">
            <template slot-scope="scope">
                  <el-checkbox @change="handleEdit(scope.row)" v-model="scope.row.checked"></el-checkbox>
            </template>
        </el-table-column>
        <el-table-column label="商品" width="120">
        <template slot-scope="scope">
              <img :src="scope.row.productImage" alt="" />
            {{ scope.row.product }}
        </template>
    </el-table-column>

        <el-table-column label="价格" prop="salePrice" width="120"></el-table-column>

        <el-table-column label="数量">
            <template slot-scope="scope">
                  <el-input-number @change="handleEdit(scope.row)" size="mini" v-model="scope.row.productNum" :min="1"></el-input-number>
            </template>
    </el-table-column>

          <el-table-column
            label="小计"
            width="120">
            <template slot-scope="scope">
                  {{scope.row.productNum*scope.row.salePrice}}
            </template>
    </el-table-column>
                <el-table-column width="120" label="操作">
                    <template slot-scope="scope">
                      <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
        </el-table>
        <p>
            全选<el-checkbox v-model="checkAll"></el-checkbox>
        </p>
    </div>
</template>

<script>

import UserHttp from '../../models/UserHttp'
    export default {
        data() {
            return {
                cartList:[],
            }
        },
        computed:{
            checkAll:{
                get(){
                    return this.cartList.every(item=>item.checked)
                },
                set(val){
                    // console.log(val)
                    //改变它的依赖不能直接改变值
                    UserHttp.setAllchecked(val).then(res=>{
                      console.log(res)
                    })
                      this.cartList.forEach(item=>{
                        item.checked =val
                      })
                }
            }
        },
        async mounted() {
            var res = await UserHttp.getCartList();
            console.log(res.data.res);
            this.cartList = res.data.res;
        },
        methods: {
          getSummaries(){
            var sum = 0;
            if(this.cartList.length>0){
              this.cartList.forEach(item=>{
                if(item.checked == true){
                  sum+= item.productNum*item.salePrice
                }
              })
            }
            // console.log(this.cartList)
            return ["总价",sum,"元"]
          },
          async handleEdit(val){
            console.log(val)
            var {_id,productNum,checked} = val;
            console.log(_id,productNum)
            await UserHttp.editCartList({
                id:_id,
                productNum,
                checked
            })
          },
          async handleNum(val){
            console.log(val)
            var {_id,productNum} = val;
            console.log(_id,productNum)
            await UserHttp.editCartList({
                id:_id,
                productNum,
            })
          },
          async handleDelete(val) {
            console.log(val);
            var {_id} = val;
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
              // center: true
            }).then(() => {
              console.log(_id)
                var cartList = this.cartList;
                cartList = this.cartList.filter(item=>{
                    return item._id !=_id;
                })
                this.cartList = cartList;

              UserHttp.deleteCart(_id).then(res=>{
                console.log(res.data)
                this.$message({
                  type:'success',
                  message:"删除成功"
                })
              })
            }).catch(() => {
                this.$message({
                  type:'info',
                  message:"已取消删除"
                })
              });
          },
        },
    }
</script>

<style scoped>
img{
  width: 100px;
  height: 100px;

}
</style>